<template>
    <div class="user-list">
        <div style="margin: 20px 0"></div>
        <el-table :data="orders" style="width: 100%">
            <el-table-column prop="id" label="ID" min-width="80" />
            <el-table-column prop="user" label="下单用户" min-width="120">
                <template #default="scope">
                    <el-tag type="" effect="dark">{{
                        scope.row.user.username
                    }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="product" label="产品标题" min-width="340">
                <template #default="scope">
                    <span style="color: green">
                        {{ scope.row.product.title }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="position" label="收货地址" min-width="340">
                <template #default="scope">
                    <span style="color: red">
                        {{ scope.row.position }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="price" label="价格" min-width="100">
                <template #default="scope">
                    <el-tag type="danger" effect="dark"
                        >￥{{ scope.row.product.price }}</el-tag
                    >
                </template>
            </el-table-column>
            <el-table-column prop="images" label="产品图片" min-width="240">
                <template #default="scope">
                    <img
                        v-if="scope.row.product.product_images.length"
                        :src="
                            'http://localhost:3000/' +
                            scope.row.product.product_images[0].url
                        "
                        alt=""
                        style="width: 200px; height: 200px"
                    />
                    <el-tag v-else type="danger">暂未上传logo</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" min-width="120">
                <template #default="scope">
                    <el-tag type="danger" effect="dark">
                        {{
                            scope.row.status == 0
                                ? "等待发货"
                                : scope.row.status == 1
                                ? "等待收货"
                                : "已完成"
                        }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" min-width="280">
                <template #default="scope">
                    <el-button
                        v-if="scope.row.status == 0"
                        type="warning"
                        @click="updateOrder(scope.row, 1)"
                        >发货</el-button
                    >
                    <el-button
                        v-if="scope.row.status == 2"
                        type="danger"
                        @click="delOrder(scope.row)"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import { del, list, update } from "@/api/order";

import { ElMessage } from "element-plus";

const ruleFormRef = ref();

const orders = ref([]);

onMounted(() => {
    getOrders();
});

const getOrders = async () => {
    try {
        const res = await list();
        orders.value = res.result.filter((ele) => ele.product);
    } catch (err) {
        console.error(err);
    }
};

const delOrder = async (row) => {
    await del({
        id: row.id,
    });
    ElMessage.success("删除成功");
    getOrders();
};

const updateOrder = async (row, status) => {
    await update({ id: row.id, status });
    ElMessage.success("更新成功");
    getOrders();
};
</script>
